<template>
	<view v-if="pageShow">
		<view class="" style="padding-bottom: 150rpx;">
			<!-- #ifdef APP-PLUS -->
			<view class="" style="height: 580rpx;width: 100%;" v-if="tabs==1">
				<video :src="videotext" object-fit="cover" style="width: 100%;height: 100%;"></video>
			</view>
			<!-- #endif -->
			<!-- 轮播图 -->
			<view class="dingwei" v-if="tabs==2">
				<swiper style="height: 580rpx;width: 100%;" circular autoplay>
					<swiper-item v-for="(item,index) in dataAll.images_text" :key="index">
						<video :src="item" v-if="isvideo(item)" object-fit="cover"  style="width: 100%;height: 100%;"></video>
						<image :src="item"  v-if="!isvideo(item)" mode="" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
				<view class="flexleft icowz">
					<!-- #ifdef MP-WEIXIN || H5 -->
					<button open-type="share">
						<u-icon name="share-square" size="26" color="#f5f5f5"></u-icon>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<u-icon name="share-square" size="26" color="#f5f5f5" @click="sharePoster()"></u-icon>
					<!-- #endif -->
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="flexcenter margin_top">
				<view class="all" :class="tabs==1?'gongying':' xuqui'" @click="tabs=1">视频</view>
				<view class="alls" :class="tabs==2?'gongying':'xuqui'" @click="tabs=2">图片</view>
			</view>
			<!-- #endif -->
			<!-- 赛事名称-->
			<view class="mainpadding ffffff">
				<view class="flexleft">
					<view class="xiaolhbtn margin_right1" v-if="dataAll.activity_status==1">未开始</view>
					<view class="xiaocbtn margin_right1" v-if="dataAll.activity_status==2">报名中</view>
					<view class="xiaolabtn margin_right1" v-if="dataAll.activity_status==3">待开始</view>
					<view class="xiaojubtn margin_right1" v-if="dataAll.activity_status==4">已开始</view>
					<view class="xiaohbtn margin_right1" v-if="dataAll.activity_status==5">活动结束</view>
					<view class="sanshier xiaohei fonweight">{{dataAll.name}}</view>
				</view>

				<view class="margin_top1 flexbetween xiahuaxian">
					<!-- <view class="margin_top1 flexbetween xiahuaxian" @click="tzhdxq"> -->
					<view class="yhxk xiaohui ershiba nofonweight ">{{dataAll.hdjs_des}}</view>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<view class="flexbetween margin_top2" @click="tzjlbxq(dataAll.zbfapply.id)">
					<view class="flexleft ">
						<image class="touxianghty margin_right1" :src="dataAll.zbfapply.logo_text" mode=""></image>
						<view class="ershil xiaohei nofonweight">{{dataAll.zbfapply.name}}</view>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>

			</view>
			<!-- 信息内容 -->
			<view class="ffffff mainpadding margin_top1">
				<view class="flexleft xiahuaxian">
					<view class="zixikd titletext xiaohei nofonweight">组织人</view>
					<view class="flexbetween" style="width: 68%;">
						<view class="flexleft">
							<!-- <image class="touxianghty margin_right1" src="../static/image/system/huiyuan.png" mode="">
							</image> -->
							<view class="ershiba xiaohui nofonweight">{{dataAll.zbfzzr}}</view>
						</view>
						<u-icon name="phone-fill" color="#1BA95B" @click="phone(dataAll.zbfmobile)"></u-icon>
					</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">报名开始时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bm_starttime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">报名结束时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bm_endtime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">活动开始时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bs_starttime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">活动结束时间</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.bs_endtime_text}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">活动费用</view>
					<view class=" ershiba xiaolv nofonweight">￥{{dataAll.price}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top">
					<view class="zixikd titletext xiaohei nofonweight">活动地址</view>
					<view class=" ershiba xiaohui nofonweight">{{dataAll.cityinfo}}{{dataAll.address}}</view>
				</view>
				<view class="flexleft xiahuaxian margin_top" @click="tzyibaom">
					<view class="zixikd titletext xiaohei nofonweight">已报名</view>
					<view class="flexbetween" style="width: 68%;">
						<view class="flexleft">
							<view class=" ershiba xiaohui nofonweight margin_right1">
								{{dataAll.bm_join_num}}/{{dataAll.join_num}}
							</view>
							<template v-if="bmlist.length">
								<view class="touxia margin_right1" v-for="item in bmlist" :key="item.id">
									<image :src="item.user.avatar_text" mode=""></image>
								</view>
								<view class=" ershiba xiaohui nofonweight margin_right1" v-if="bmlist.length>5">...
								</view>
							</template>

						</view>
						<template v-if="bmlist.length">
							<u-icon name="arrow-right"></u-icon>
						</template>
					</view>
				</view>
				<!-- <view class="xiahuaxian margin_top">
					<view class=" titletext xiaohei nofonweight">备注</view>
					<view class=" titletext xiaohui nofonweight margin_top1">
						备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明备注说明
					</view>
				</view> -->
				<view class=" titletext xiaohei nofonweight margin_top">活动详情图</view>
				<view class="margin_top2 " v-for="(item,index) in dataAll.hdjs_images_text"
					@click="lbtpriview(index,dataAll.hdjs_images_text)">
					<image class="cgtpiam" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb mainpadding ffffff" @click="tzqbm" v-if="dataAll.activity_status==2">
			<view class="bigbtn">报名</view>
		</view>
		<zhangyu-qrcode-poster ref="poster" :title="dataAll.name" :subTitle="dataAll.hdjs_des"
			:headerImg="dataAll.image_text" price=""></zhangyu-qrcode-poster>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [],
				show: false,
				fxshow: false,
				dataAll: {},
				pageShow: false,
				userInfo: {},
				bmlist: [],
				ewmimg: "",
				videotext:"",
				// #ifdef MP-WEIXIN || H5
				tabs:2
				// #endif
				// #ifdef APP-PLUS
				tabs:1
				// #endif
			}
		},
		onLoad(options) {
			if(options.id){
				this.listid = options.id
			}
			if (options.rec_user_id) {
				uni.setStorageSync("rec_user_id", options.rec_user_id)
			}
			console.log(options,"接收的参数");
			// #ifdef MP-WEIXIN
			let _this = this
			const url = decodeURIComponent(options.q) // 获取到二维码原始链接内容
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				let theRequest = {};
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]); 
				}
				console.log(theRequest,"二维码接收的参数");
				this.listid = options.id ? options.id : (theRequest.id ? theRequest.id :
					0);
				let rec_user_id = options.rec_user_id ? options.rec_user_id : (theRequest.rec_user_id ? theRequest.rec_user_id :
					0);
				if (rec_user_id != 0) {
					uni.setStorageSync('rec_user_id', rec_user_id);
				}
			}
			// #endif
			this.getDetail()
			this.getbmlist()
			// #ifdef APP-PLUS
			this.getewm()
			// #endif

		},
		onShow() {
			if (httpRequest.checkIsLogin()) {
				this.userinfomsg()
			}
		},

		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			let _this = this
			return {
				title: this.dataAll.name,
				path: "pages_julebu/huodongxq?id=" + this.listid + "&rec_user_id=" + uni.getStorageSync("user_id"),
			}
		},
		// #endif
		methods: {
			isvideo(data) {
				let istrue = false
				if(data.indexOf("mp4")!=-1){
					istrue = true
				}else if(data.indexOf("m2v")!=-1){
					istrue = true
				}else if(data.indexOf("mkv")!=-1){
					istrue = true
				}
				console.log(data,istrue,"09999");
				return istrue
			},
			getewm() {
				httpRequest.request("/api/user/getCodeImage", 'GET', {
					type_id: this.listid,
					type: 4 //1=场地,2=课程,3=赛事,4=活动,5=商城
				}, false, false, true).then(res => {
					this.ewmimg = res.data.code_image
				})
			},
			sharePoster() {
				//获取带参数二维码
				this.$refs.poster.showCanvas(this.ewmimg)
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			lbtpriview(index, arr) {
				var i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getDetail() {
				httpRequest.request('/api/Activitycl/activityDetail', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.list1 = res.data.images_text
					// #ifdef MP-WEIXIN || H5
					
					this.list1.unshift(res.data.hdjs_video_text)
					// #endif
					// #ifdef APP-PLUS
					this.videotext = res.data.hdjs_video_text
					// #endif
					// this.list1.unshift(res.data.sszzdw_video_text)
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			getbmlist() {
				httpRequest.request('/api/Activitycl/activityBmIndex', 'GET', {
					activity_id: this.listid,
					page: 1,
					limit: 5
				}, false, false, true).then(res => {
					this.bmlist = res.data.data
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 跳转已报名
			tzyibaom() {
				if (this.bmlist.length == 0) {
					return false
				}
				uni.navigateTo({
					url: '/pages_saishi/yibaoming?type=2&id=' + this.listid
				})
				// uni.navigateTo({
				// 	url: '/pages_julebu/huodongybm'
				// })
			},
			// 跳转俱乐部详情
			tzjlbxq(id) {
				uni.navigateTo({
					url: '/pages_julebu/huodongjlbxq?id=' + id
				})
			},
			// 跳转去活动报名
			tzqbm() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				// dataAll.type:1个人赛，2团队赛
				// userInfo.type:1主办方，2俱乐部，3团队
				// if (this.dataAll.type == 2 && !this.userInfo.userzbfapply || this.dataAll.type == 2 && this.userInfo.userzbfapply.type != 3) {
				// 	httpRequest.toast("当前活动只有团队可以参加！")
				// 	return false
				// }
				let smrzstatus = this.returnrztext(this.userInfo.usersmrz)
				if(smrzstatus=="未认证"){
					httpRequest.toast("请先实名认证")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shengfenzrz'
						})
					},1000)
					return false
				}
				if(smrzstatus=="待审核"){
					httpRequest.toast("实名认证审核中，暂时无法包名")
					return false
				}
				if(smrzstatus=="认证失败"){
					httpRequest.toast("实名认证失败，请重新提交审核后再重新报名")
					setTimeout(()=>{
						uni.navigateTo({
							url: '/pages_mypage/shenhe'
						})
					},1000)
					return false
				}
				uni.navigateTo({
					url: '/pages_julebu/huodongbm?id=' + this.listid
				})
			},
			returnrztext(data){
				if(!data){
					return "未认证"
				}
				// 实名认证状态:1=待审核,2=认证成功,3=认证失败
				if(data.smrz_status==1){
					return "待审核"
				}else if(data.smrz_status==2){
					return "认证成功"
				}else if(data.smrz_status==3){
					return "认证失败"
				}
			},
			// 跳转活动详情
			tzhdxq() {
				uni.navigateTo({
					url: '/pages_julebu/huodongjies'
				})
			},
			close() {
				this.show = false
			},
			fxclose() {
				this.fxshow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1ba95b;
		padding: 11rpx 38rpx;
		border: 2rpx solid #1ba95b;
	}
	
	.alls {
		background: #1ba95b;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #1ba95b;
	}
	
	.zixikd {
		width: 220rpx;
	}
	.xuqui {
		background: #fff;
		color: #1ba95b;
		border: 2rpx solid #1ba95b;
	}
	
	.gongying {
		background: #1ba95b;
		color: #ffff;
		border: 2rpx solid #1ba95b;
	}

	page {
		background-color: #F9F9F9;
	}

	.cgtpiam {

		width: 100%;
		// border-radius: 16rpx;
	}

	.touxia {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;

		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.hxhuibtn {
		width: 100rpx;
		height: 40rpx;
		background: #F9F9F9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.huisebtn {
		width: 140rpx;
		height: 56rpx;
		background: #F5F5F5;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #777777;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lvsebtn {
		width: 140rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolabtn {
		width: 80rpx;
		height: 40rpx;
		background: #078CE6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaohbtn {
		width: 100rpx;
		height: 40rpx;
		background: #BAC3D5;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #091636;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaolhbtn {
		width: 80rpx;
		height: 40rpx;
		background: #1BA95B;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaojubtn {
		width: 80rpx;
		height: 40rpx;
		background: #F8B900;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xiaocbtn {
		width: 80rpx;
		height: 40rpx;
		background: #F76222;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.guandys {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.bofang {
		width: 120rpx;
		height: 120rpx;
		background-size: 100% 100%;
		position: absolute;
		bottom: 222rpx;
		left: 316rpx;
		background-image: url('../static/image/system/bfh.png');
	}

	.erwim {
		width: 128rpx;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.erwmtu {
		width: 412rpx;
		height: 328rpx;
		border-radius: 8rpx;

		image {
			border-radius: 8rpx;
			width: 100%;
			height: 100%;
		}
	}

	.icowz {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}
</style>